<template>
    <div>
      <div id="g_top" class="m-top">&nbsp;</div>
      <div class="g-bd">
        <div class="n-mylv" v-if="userData">
          <!-- 第一个模块 等级进度条 -->
          <div class="n-lv">
            <div class="h3">
                当前等级
              <span class="n-level-big"><i></i>{{userData.level}}</span>
              <span class="n-level-tips">等级数据每天下午2点更新</span>
            </div>
            <div class="sub">
             <div class="subbg">
               <div :style="{'width':(25+81)*(userData.level +1)*0.7 +'px'}"><span></span></div>
             </div>
             <div class="subnum">
              <div class="divison"><span v-for="index in 10" :key="index"></span></div>
              <div class="divnum">
                <ul>
                  <li :class="{'z-ov':index < userData.level  ,  'z-on': index == userData.level}" v-for="(item , index ) in 11" :key="index">{{index}}</li>
                </ul>
              </div>
             </div>
            </div>
          </div>
           <!-- 第二个模块 当前等级特权 -->
           <div class="n-pow">
               <div class="h3">当前等级特权：</div>
               <div class="telist">
                  <ul class="j-flag" v-for="(item , index) in info" :key="index">
                    <li>{{item}} </li>
                  </ul>
               </div>
               <div class="aboutmore"><a href="javascript:;" title="功能还未制作">了解等级特权&gt;</a></div>
           </div>
           <!-- 第三个模块 距离下一个等级 -->
           <div class="n-nextlv">
             <div class="h4">
                距离下一个等级：
                <span class="n-level"><i></i>{{userData.level +1}} </span>
             </div>
             <div class="uitl">
                <span class="tit">听歌：</span>
                <div class="bar">
                  <div class="barbox">
                    <span :style="{'width':userData.progress*100+'%'}"></span>
                  </div>
                </div>
                还需听歌{{userData.nextPlayCount - userData.nowPlayCount}}首
             </div>
              <div class="uitl">
                <span class="tit">登录：</span>
                <div class="bar">
                  <div class="barbox">
                    <span style="width:100%;"></span>
                  </div>
                </div>
                还需登录{{userData.nextLoginCount - userData.nowLoginCount}}天
             </div>
           </div>
        </div>
      </div>
    </div>
</template>
<script>
import {user_level} from '../../network/user'
export default {
    data() {
        return {
           userData:null 
        }
    },
    methods:{
        resLevel(){
            console.log("wbjzl")
            user_level().then(res => {
                this.userData = res.data.data
               })
        }
    },
    computed:{
       info(){
          return this.userData.info.split("$")
       }
    },
    created(){
        this.resLevel()
    }
}
</script>

<style scoped>
.m-top {
    position: relative;
    z-index: 910;
    height: 73px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
}
.g-bd{
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
}
.n-mylv {
    padding: 70px 68px;
}
.n-lv {
    margin-bottom: 52px;
}
.n-mylv .h3 {
    position: relative;
    z-index: 1;
    height: 32px;
    line-height: 32px;
    color: #333;
    font-size: 22px;
    margin-bottom: 4px;
    font-family: 'Microsoft YaHei';
}
.n-level-big {
    position: relative;
    z-index: 1;
    height: 32px;
    line-height: 32px;
    margin-left: 30px;
    font-family: Arial;
    font-size: 24px;
    font-weight: 700;
    color: #e03a24;
    font-style: italic;
}
.n-level-big i {
    position: absolute;
    left: -30px;
    top: 0;
    z-index: 1;
    width: 30px;
    height: 30px;
    background: url("https://s2.music.126.net/style/web2/img/mylevel.png?7b51257214195ea54f102a78b899b0ce") no-repeat;
    background-position: left 5px;
}
.n-mylv .h3 .n-level-tips {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 101px;
    font-size: 12px;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
}
.n-lv .sub {
    width: 100%;
    position: relative;
    z-index: 1;
    padding-top: 31px;
    height: 34px;
    overflow: hidden;
}
.n-lv .sub .subbg {
    width: 835px;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    border-radius: 10px;
    background: #dcdfe6;
}
@keyframes move {
    from{width: 0;}
    to{width: 100%;}
}
.n-lv .sub .subbg span {
    background: url("https://s2.music.126.net/style/web2/img/mylevelbar.png?30f603d23272bc06c11ee01cf2f030c9") 0 0 repeat-y;
    width: 100%;
    height: 10px;
    display: block;
    border-radius: 10px;
    -webkit-animation: move 2s;
    animation: move 2s;
}

.n-lv .sub .subnum {
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
}
.n-lv .divison {
    position: absolute;
    left: 13px;
    bottom: 0;
    width: 100%;
    height: 10px;
}
.n-lv .divison span {
    float: left;
    display: inline;
    width: 1px;
    background: #fff;
    height: 10px;
    margin-left: 80px;
}
.n-lv .divnum {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Microsoft YaHei';
    font-size: 18px;
    color: #c4c6cc;
    width: 980px;
}
.n-lv .divnum li {
    float: left;
    width: 25px;
    height: 28px;
    line-height: 24px;
    display: inline;
    margin-right: 56px;
    text-align: center;
}
.n-lv .divnum li.z-ov {
    color: #ed5757;
    animation: show 3s;
}
@keyframes show {
    from{color: #c4c6cc;}
    to{color: #ed5757;}
}

@keyframes show1 {
    0% {color: #c4c6cc; background-position: 9999px 9999px; }
    50% {color: #c4c6cc; background-position: 0 -50px;}
    100% {color: #fff;} 
}
.n-lv .divnum li.z-on {
    color: #fff;
    background: url("https://s2.music.126.net/style/web2/img/mylevel.png?7b51257214195ea54f102a78b899b0ce") no-repeat;
    background-position: 0 -50px;
    animation: show1 2s;
}

.n-pow .telist {
    padding-bottom: 10px;
}
.n-pow .telist li {
    height: 30px;
    line-height: 30px;
    color: #666;
    padding-left: 13px;
    background: url("https://s2.music.126.net/style/web2/img/mylevel.png?7b51257214195ea54f102a78b899b0ce") no-repeat;
    background-position: -17px -82px;
    font-size: 14px;
}
.n-pow .aboutmore {
    color: #0e73ba;
    margin-top: 28px;
    padding-left: 4px;
    margin-bottom: 26px;
    height: 20px;
    line-height: 20px;
}
.n-pow .aboutmore a {
    color: #0e73ba;
}
.n-pow .aboutmore a:hover{
    text-decoration: underline;
}
.n-nextlv .h4 {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
}
.n-level {
    position: relative;
    margin-left: 25px;
    font-family: Arial;
    font-size: 18px;
    font-weight: 700;
    color: #e03a24;
    font-style: italic;
}
.n-level i {
    position: absolute;
    left: -25px;
    top: 0;
    width: 25px;
    height: 22px;
     background: url("https://s2.music.126.net/style/web2/img/mylevel.png?7b51257214195ea54f102a78b899b0ce") no-repeat;
    background-position: 0 -25px;
}
.n-nextlv .uitl {
    font-size: 12px;
    color: #999;
    height: 32px;
    line-height: 32px;
}
.n-nextlv .uitl .tit {
    line-height: 32px;
    color: #666;
}
.n-nextlv .bar {
    display: inline-block;
    width: 160px;
    height: 12px;
    margin-right: 6px;
    position: relative;
    zoom: 1;
}
.n-nextlv .barbox {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 1;
    width: 160px;
    height: 4px;
    line-height: 0;
    background: #dcdfe6;
    border-radius: 4px;
}
.n-nextlv .barbox span {
    height: 100%;
    background: #f75757;
    border-radius: 4px;
    display: block;
}
</style>